<script setup lang="ts" name="FsButton">
import { ref } from 'vue'

const props = defineProps({
  // 是否外部控制loading
  showLoading: {
    type: Boolean,
    default: true
  },
  // 是否自动失去焦点
  autoBlur: {
    type: Boolean,
    default: true
  },
})

const emits = defineEmits(['click'])
const btnRef = ref<any>(null)

const loading = ref(false)

const onCancelLoading = () => {
  loading.value = false
}

const onClick = (event: any) => {
  if (loading.value) {
    return
  }
  if (props.autoBlur) {
    btnRef.value.ref.blur()
  }
  loading.value = true
  if (!props.showLoading) {
    emits('click', {event})
    loading.value = false
  } else {
    emits('click', {event, done: onCancelLoading})
  }
}

</script>
<template>
  <el-button ref="btnRef" :loading="loading" v-bind="$attrs" @click="onClick">
    <slot/>
  </el-button>
</template>
